import React, { Component } from 'react'
import { withRouter } from 'react-router-dom'
import { Button, Input, MessageBox, Message } from 'element-react'

class GoodsFormatList extends Component {
  constructor(props, context) {
    super(props, context)
    this.state = {
      // 新增时候参数
      tags: {name: "12", values: []},
      // 编辑时候参数
      editTags: {specId: '', specName: '34', values: []},
      inputValue: '',
      inputVisible: false
    }
  }
  componentDidMount() {
    if (this.props.id) {
      this.setState({editTags: this.props.formatItem})
    } else {
      this.setState({tags: this.props.formatItem})
    }
  }
  // 发送数据到父组件
  sendMsg (item) {
    if (this.props.id) {
      this.props.getTags(item)
    } else {
      this.props.getTags(item, this.props.num)
    }
  }
  newTag () {
    MessageBox.prompt('请输入新规格值', '提示').then(({ value }) => {
      Message({
        type: 'success',
        message: '添加成功'
      })
      if (this.props.id) {
        this.state.editTags.values.push({'value': value})
        this.setState({editTags: this.state.editTags})
        this.sendMsg(this.state.editTags)
      } else {
        this.state.tags.values.push(value)
        this.setState({tags: this.state.tags})
        this.sendMsg(this.state.tags)
      }
    }).catch(() => {
      Message({
        type: 'info',
        message: '取消输入'
      })
    })
  }
  changeVal (index, value) {
    if (this.props.id) {
      // this.state.editTags.values[index]['value'] = value
      // this.setState({editTags: this.state.editTags})
      let valueArr = this.state.editTags.values
      valueArr[index]['value'] = value
      this.setState({editTags: Object.assign({}, this.state.editTags, {values: valueArr})})
      this.sendMsg(this.state.editTags)
    } else {
      // this.state.tags.values[index] = value
      // this.setState({tags: this.state.tags})
      let valueArr = this.state.tags.values
      valueArr[index] = value
      this.setState({tags: Object.assign({}, this.state.tags, {values: valueArr})})
    }
  }
  changeName (value) {
    if (this.props.id) {
      // this.state.editTags.specName = value
      // this.setState({editTags: this.state.editTags})
      this.setState({editTags: Object.assign({}, this.state.editTags, {specName: value})})
      this.sendMsg(this.state.editTags)
    } else {
      // this.state.tags.name = value
      // this.setState({tags: this.state.tags})
      this.setState({tags: Object.assign({}, this.state.tags, {name: value})})
    }
  }
  cleanItem (index) {
    this.state.tags.values.splice(index, 1)
    this.setState({tags: this.state.tags})
    this.sendMsg(this.state.tags)
  }
  render() {
    let inputItem = null
    if (this.props.id) {
      inputItem = (
        this.state.editTags.values.map((tag, index) => {
          return (
            <div className="inline-marginR-20 marginB-20" key={index}>
              <Input className="inputSmall" value={tag.value}  size="large" onChange={value => {this.changeVal(index, value)}}/>
            </div>
          )
        })
      )
    } else {
      inputItem = (
        this.state.tags.values.map((tag, index) => {
          return (
            <div className="inline-marginR-20 marginB-20" key={index}>
              <Input className="inputSmall" value={tag}  size="large" icon="close" onChange={value => {this.changeVal(index, value)}} onIconClick={this.cleanItem.bind(this, index)}/>
            </div>
          )
        })
      )
    }
    return (
      <div className="Format">
        <div className="inputGroup">
          <label className="inputLabel">规格名称：</label>
          {
            this.props.id ? <Input placeholder="请输入规格名称" className="inputSmall" size="large" value={this.state.editTags.specName} onChange={value => {this.changeName(value)}}/> : <Input placeholder="请输入规格名称" className="inputSmall" size="large" value={this.state.tags.name} onChange={value => {this.changeName(value)}}/>
          }
          
        </div>
        <div className="inputGroup">
          <div className="spec">规格值：</div>
          <div className="specNum">
            {inputItem}
            <Button type="primary" size="small" onClick={this.newTag.bind(this)}>新增</Button>
          </div>
        </div>

      </div>
    );
  }
}

export default withRouter(GoodsFormatList)